﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Title -->
    <title>Rapid - A Responsive WordPress Blog Theme</title>
    
    <!-- /favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/assets1/css/bootstrap.min.css">

    <!--矢量图标-->
    <link rel="stylesheet" href="/style/icon/icon.css">
    
    <!-- Font awesome CSS -->
    <link rel="stylesheet" href="/assets1/css/font-awesome.min.css">
    
    <!-- Animate CSS -->
    <link rel="stylesheet" href="/assets1/css/animate.min.css">
    
    <!-- OwlCarousel CSS -->
    <link rel="stylesheet" href="/assets1/css/owl.carousel.css">
    
    <!-- SlickNav CSS -->
    <link rel="stylesheet" href="/assets1/css/slicknav.min.css">
    
    <!-- Magnific popup CSS -->
    <link rel="stylesheet" href="/assets1/css/magnific-popup.css">
    
    <!-- Main CSS -->
    <link rel="stylesheet" href="/assets1/css/style.css">
    
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/assets1/css/responsive.css">

</head>
<body>



<!-- 头部图片logo 开始 -->
<section  th:replace="~{common/blogHead :: blogHead}">
</section>
<!-- 头部图片logo 结束 -->

<!-- 头部菜单 开始-->
<section  th:replace="~{common/blogMenu :: blogMenu}">
</section>
<!-- 头部菜单 结束 -->

    
    
    <!-- 面包屑起始 -->
    <section class="rapid-breadcromb-area section_50">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="breadcromb">
                        <h3 th:text="${article.title}"></h3>
                        <ul>
                            <li><a th:text="${article.category.categoryName}" th:href="'/category/'+${article.category.id}"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 面包屑结束 -->
    
    
    
    <!-- 内容区域起始 -->
    <section class="rapid-Allpost-area section_50">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="blog-page-left">
                        <div class="single-blog">
                            <div class="blog-image">
                                <img th:src="@{'/assets/img/' + ${article.image}}" alt="blog"/>
                            </div>
                            <div class="blog-text single-post-text">
                                <div class="post-cat">
                                    <p th:text="${article.category.categoryName}"></p>
                                </div>
                                <h2 th:text="${article.title}"></h2>
                                <div class="blog-meta">
                                    <ul>
                                        <li th:text="'-:' + ${#dates.format(article.releaseDate, 'yyyy-MM-dd HH:mm:ss')}"></li>
                                        <li><a th:text="${article.user.userName}" href="#"></a></li>
                                        <li><a href="#"><span th:text="${article.countComment}"></span> <i class="fa fa-comments-o"></i></a></li>
                                    </ul>
                                </div>
                                <div th:utext="${article.content}" class="post-content">
                                </div>
                                <!--文本分割线开始-->
                                <div class="single-post-btm-tag">
                                    <div class="row">
                                        <div class="col-md-8 no-pad-left">
                                            <div class="btm-tag-left">
                                                <ul>
                                                    <li th:each="articleTag : ${articleTagList}"><a th:text="${articleTag.tagName}" th:href="'/tag/'+${articleTag.id}"></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-md-4 no-pad-right">
                                            <div class="share-button-social btm-tag-right">
                                                <a href="https://www.douyin.com/user/MS4wLjABAAAA6971BgqCM2UsWrV0Jg1kTba9VwYAAwEsbHKeQ8-ozPA?from_tab_name=main" target="_blank"
                                                ><i class="iconfont icon-douyin1"></i></a>
                                                <a href="https://m.weibo.cn/u/7782530542?t=0&luicode=10000011&lfid=100103type%3D1%26q%3D%E6%98%BC%E5%A4%9C%E9%A2%A0%E5%80%92%E7%9C%8B%E6%9C%88%E6%98%9F" target="_blank"
                                                ><i class="iconfont icon-xinlangweibo"></i></a>
                                                <a href="https://blog.csdn.net/zanzanzanzan_?ops_request_misc=%7B%22request%5Fid%22%3A%22b465350d8f8a07e17a4e313aab11c0a9%22%2C%22scm%22%3A%2220140713.130064515..%22%7D&request_id=b465350d8f8a07e17a4e313aab11c0a9&biz_id=206&utm_medium=distribute.pc_search_result.none-task-user-null-1-159003356-null-null.nonecase&utm_term=zanzanzanzan_&spm=1018.2226.3001.4351"
                                                > <i class="iconfont icon-csdn"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--文本分割线结束-->

<!--                                &lt;!&ndash;发布者信息开始&ndash;&gt;-->
<!--                                <div class="author-bio">-->
<!--                                    <a href="#">-->
<!--                                        <img th:src="${user.avatar}" alt="about image"/>-->
<!--                                    </a>-->
<!--                                    <div class="author-info">-->
<!--                                        <h4><a th:text="${user.userName}"></a></h4>-->
<!--                                        <p th:text="${user.tagline}"></p>-->
<!--                                        <ul>-->
<!--                                            <li>-->
<!--                                                <a class="external-link"-->
<!--                                                   href="https://www.douyin.com/user/MS4wLjABAAAA6971BgqCM2UsWrV0Jg1kTba9VwYAAwEsbHKeQ8-ozPA?from_tab_name=main"-->
<!--                                                   target="_blank">-->
<!--                                                    <i class="iconfont icon-douyin1"></i>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <a class="external-link"-->
<!--                                                   href="https://m.weibo.cn/u/7782530542?t=0&luicode=10000011&lfid=100103type%3D1%26q%3D%E6%98%BC%E5%A4%9C%E9%A2%A0%E5%80%92%E7%9C%8B%E6%9C%88%E6%98%9F"-->
<!--                                                   target="_blank">-->
<!--                                                    <i class="iconfont icon-xinlangweibo"></i>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <a class="external-link"-->
<!--                                                   href="https://www.xiaohongshu.com/user/profile/6587abda000000001b0334ef?xsec_token=ABpF0qQrtwZe2mreAE6TjpbRb3JVaUgCe_KjBeqPtOaN8%3D&xsec_source=pc_search"-->
<!--                                                   target="_blank">-->
<!--                                                    <i class="iconfont icon-xiaohongshu"></i></a></li>-->
<!--                                            <li>-->
<!--                                                <a class="external-link"-->
<!--                                                   href="https://blog.csdn.net/zanzanzanzan_?ops_request_misc=%7B%22request%5Fid%22%3A%22b465350d8f8a07e17a4e313aab11c0a9%22%2C%22scm%22%3A%2220140713.130064515..%22%7D&request_id=b465350d8f8a07e17a4e313aab11c0a9&biz_id=206&utm_medium=distribute.pc_search_result.none-task-user-null-1-159003356-null-null.nonecase&utm_term=zanzanzanzan_&spm=1018.2226.3001.4351"-->
<!--                                                   target="_blank">-->
<!--                                                    <i class="iconfont icon-csdn"></i></a></li>-->
<!--                                            <li>-->
<!--                                                <button type="button" class=" my-custom-button" title="282307130@QQ.com"-->
<!--                                                        data-container="body" data-toggle="popover" data-placement="right"-->
<!--                                                        data-content="有事请留言">-->
<!--                                                    <i class="iconfont icon-QQyouxiang2"></i>-->
<!--                                                </button>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                &lt;!&ndash;发布者信息结束&ndash;&gt;-->

                                <div class="rapid-leave-comment ">
                                    <h2>发表评论</h2>
                                    <form id="commentForm">
                                        <textarea class="comment" placeholder="Comment..." name="comment"></textarea><br/>
                                        <input type="submit" value="发送" style="width: 160px">
                                        <input type="hidden" id="getVisitor" th:value="${getVisitor}" />
                                        <input type="hidden" id="articleId" th:value="${article.id}" />
                                    </form>
                                    <p id="loginPrompt" style="display: none">请先后登录再评论&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/visitor/visitorLogin" style="margin-right: 20px ;color: #66afe9">去登录</a></p>
                                </div>
                                <!--留言信息开始-->
                                <div class="rapid-comment-list">
                                    <div class="comment-group-title">
                                        <h2 th:text="${countComment}+' 条评论'"></h2>
                                    </div>
                                    <div class="single-comment-item">
                                        <div class="single-comment-box" th:each="comment : ${commentList}">
                                            <div class="main-comment">
                                                <div class="author-image">
                                                    <img th:src="'/assets/img/'+${comment.visitor.visitorAvatar}" style="height: 80px;width: 80px" alt="author" />
                                                </div>
                                                <div class="comment-text">
                                                    <div class="comment-info">
                                                        <h4 th:text="${comment.visitor.visitorName}"></h4>
                                                        <p th:text="${#dates.format(comment.releaseDate, 'yyyy-MM-dd HH:mm:ss')}"></p>
                                                    </div>
                                                    <div class="comment-text-inner">
                                                        <p th:text="${comment.message}"></p>
                                                    </div>
                                                    <a href="#" class="reply">回复</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--留言信息结束-->


                            </div>
                        </div>
                    </div>
                </div>
                <!--右侧主内容开始-->
                <div  th:replace="~{common/blogRight :: blogRight}"></div>
                <!--右侧主内容结束-->
            </div>
        </div>
    </section>
    <!-- 内容区域结束 -->



<!-- 页脚区域开始 -->
<footer th:replace="~{common/blogDown :: blogDown}">
</footer>
<!-- 页脚区域结束 -->
    
    
    
    <!-- jQuery -->
    <script src="/assets1/js/jquery.min.js"></script>
    
    <!-- Bootstrap JS -->
    <script src="/assets1/js/bootstrap.min.js"></script>
    
    <!-- Magnific Popup JS -->
    <script src="/assets1/js/jquery.magnific-popup.min.js"></script>
    
    <!-- OwlCarousel JS -->
    <script src="/assets1/js/owl.carousel.min.js"></script>
    
    <!-- SlickNav JS -->
    <script src="/assets1/js/jquery.slicknav.min.js"></script>
    
    <!-- Custom JS -->
    <script src="/assets1/js/custom.js"></script>

<!--全局\退出js-->
<script src="/assets1/js/common.js"></script>
<script>
    //Email信息显示
    $(function () {
        $("[data-toggle='popover']").popover();
    });


    <!--已有窗口跳转（避免创建多个重复窗口）(抖音，小红书跳转)-->
    const windows = {};  // 用于存储打开的窗口

    $('.external-link').on('click', function(e) {
        e.preventDefault();

        const url = $(this).attr('href');  // 获取链接目标 url
        const name = url.replace(/\W/g, '');  // 移除非字母数字字符用作窗口名称

        // 如果窗口未打开，或者窗口已经被关闭，则重新打开窗口
        if (typeof windows[name] == 'undefined' || windows[name].closed) {
            windows[name] = window.open(url, name);
        } else {
            windows[name].focus();  // 否则，让已打开的窗口获取焦点
        }
    });


    $(document).ready(function(){
        //退出登录
        $('#logoutLink').on('click', function(e) {
            e.preventDefault();
            logout();
        });

        // 在页面加载时检查是否有存储的滚动位置

        if (localStorage.getItem('scrollPosition')) {
            // 如果有，恢复该位置
            $(window).scrollTop(localStorage.getItem('scrollPosition'));
            // 然后清除存储的滚动位置
            localStorage.removeItem('scrollPosition');
        }

        // 评论监听
        $('#commentForm').on('submit', function(e){
            e.preventDefault(); // 阻止表单的默认提交行为
            const getVisitor = $('#getVisitor').val();
            const articleId = $('#articleId').val();
            if(!getVisitor) {
                $('#loginPrompt').show(); // 显示登录提示
            } else {
                const data = {
                    comment: $('.comment').val(),
                    articleId : articleId,
                };

                // 发起异步请求
                $.ajax({
                    type: 'POST',
                    url: '/visitor/comment',
                    data: data,
                    success: function() {
                        // 在提交成功后，存储当前的滚动位置
                        localStorage.setItem('scrollPosition', $(window).scrollTop());
                        // 刷新页面
                        location.reload();
                    },
                    error: function(error) {
                        console.error("Error: ", error);
                    }
                });
            }
        });
    });
</script>
    
</body>
</html>
